<template>
  <div id="home">
    <home-header></home-header>
    <home-swiper :list="swiperList"></home-swiper>
    <home-icons :iconsList="iconList"></home-icons>
    <home-recommand :recommendList="recommendList"></home-recommand>
    <home-weekend :weekendList="weekendList"></home-weekend>
  </div>
</template>

<script>
  //在首页组件中使用header组件
  import HomeHeader from './components/header'
  //在首页组件中引入轮播组件
  import HomeSwiper from './components/swiper'
  //在首页组件中引入图标组件
  import HomeIcons from './components/icons'
  //在首页组件中引入推荐项组件
  import HomeRecommand from './components/recommand'
  //在首页组件中引入周末游组件
  import HomeWeekend from './components/weekend'
  import axios from 'axios'
  import {mapState} from 'vuex'
  export default {
    name: "home",
    components:{
      HomeHeader,
      HomeSwiper,
      HomeIcons,
      HomeRecommand,
      HomeWeekend
    },
    data (){
      return {
        lastCity:'',
        swiperList:[],
        iconList:[],
        recommendList:[],
        weekendList:[]
      }
    },
    computed:{
      ...mapState(['city'])
    },
    methods:{
      getHomeInfo(){
        axios.get('/api/index.json?city='+this.city)
          .then(this.getHomeInfoSucc)
      },
      getHomeInfoSucc(res){
        res = res.data;
        console.log(res.data.city)
        if(res.ret && res.data){

          //轮播图数据
          this.swiperList = res.data.swiperList;
          //图标功能区数据
          this.iconList = res.data.iconList;
          //推荐项数据
          this.recommendList = res.data.recommendList;
          //周末去哪玩数据
          this.weekendList = res.data.weekendList;
        }
      }
    },
    mounted (){
      this.lastCity = this.city;
      this.getHomeInfo()
    },
    activated (){
      if(this.lastCity !== this.city){
        this.getHomeInfo();
      }
    }
  }
</script>

<style scoped>
  .home{
    font-size:20px;
  }
</style>
